{% extends "_layouts/examples.html" %}
{% from "docs/examples/patterns/navigation/_full-width-dropdown.jinja" import build_fake_dropdown %}

{% block title %}Navigation / Reduced{% endblock %}

{% block standalone_css %}patterns_navigation{% endblock %}

{% block content %}
<header id="navigation" class="p-navigation--reduced is-dark">
  <div class="p-navigation__row--25-75">
    <div class="p-navigation__banner">
      <div class="p-navigation__tagged-logo">
        <a class="p-navigation__link" href="#">
          <div class="p-navigation__logo-tag">
            <img class="p-navigation__logo-icon" src="https://assets.ubuntu.com/v1/82818827-CoF_white.svg" alt="">
          </div>
          <span class="p-navigation__logo-title">Canonical Ubuntu</span>
        </a>
      </div>
      <ul class="p-navigation__items">
        <li class="p-navigation__item">
          <a href="#/search" class="js-search-button p-navigation__link--search-toggle" aria-label="Search"></a>
        </li>
        <li class="p-navigation__item">
          <a href="#/navigation" class="js-menu-button p-navigation__link">Menu</a>
        </li>
      </ul>
    </div>
    <nav class="p-navigation__nav js-show-nav" aria-label="Categories">
      <ul class="p-navigation__items js-dropdown-nav-list js-navigation-sliding-panel">
        <li class="p-navigation__item--dropdown-toggle js-navigation-dropdown-toggle" role="menuitem" id="products">
          <a class="p-navigation__link" href="#products" aria-controls="products-content" tabindex="0">Products</a>
          {{ build_fake_dropdown('products-content', 'Products', links_count=11, sub_links_count=10, quick_links_count=5) }}
        </li>
        <li class="p-navigation__item--dropdown-toggle js-navigation-dropdown-toggle" role="menuitem" id="use-case">
          <a class="p-navigation__link" href="#use-case" aria-controls="use-case-content" tabindex="0">Use cases</a>
          {{ build_fake_dropdown('use-case-content', 'Use cases') }}
        </li>
        <li class="p-navigation__item--dropdown-toggle js-navigation-dropdown-toggle" role="menuitem" id="support">
          <a class="p-navigation__link" href="#support" aria-controls="support-content" tabindex="0">Support</a>
          {{ build_fake_dropdown('support-content', 'Support', links_count=2, sub_links_count=8, quick_links_count=5) }}
        </li>
        <li class="p-navigation__item--dropdown-toggle js-navigation-dropdown-toggle" role="menuitem" id="community">
          <a class="p-navigation__link" href="#community" aria-controls="community-content" tabindex="0">Community</a>
          {{ build_fake_dropdown('community-content', 'Community', links_count=5, sub_links_count=7, quick_links_count=5) }}
        </li>
        <li class="p-navigation__item--dropdown-toggle js-navigation-dropdown-toggle" role="menuitem" id="get-ubuntu">
          <a class="p-navigation__link" href="#get-ubuntu" aria-controls="get-ubuntu-content" tabindex="0">Get Ubuntu</a>
          {{ build_fake_dropdown('get-ubuntu-content', 'Get Ubuntu', links_count=6, sub_links_count=3, quick_links_count=8, has_cta_button=True ) }}
        </li>
        <li class="p-navigation__item--dropdown-toggle is-right-shifted js-navigation-dropdown-toggle" role="menuitem" id="all-canonical">
          <button aria-controls="canonical-products" class="p-navigation__link" id="all-canonical-link" aria-expanded="false">All Canonical</button>
            <ul class="p-navigation__dropdown js-navigation-sliding-panel" id="canonical-products" aria-hidden="true" data-level="1">
              <li class="p-navigation__item--dropdown-close" id="link-6-back">
                <button aria-controls="canonical-products" class="p-navigation__link js-back-button">
                  Back
                </button>
              </li>
              <li>
                <a href="#" class="p-navigation__dropdown-item">TODO...</a>
              </li>
              <li>
                <a href="#" class="p-navigation__dropdown-item">TODO....</a>
              </li>
            </ul>
        </li>
        <li class="p-navigation__item js-account" role="menuitem" id="canonical-login">
          <a href="#" class="p-navigation__link" tabindex="0">Sign in</a>
        </li>
        <li class="p-navigation__item">
          <a href="#" class="js-search-button p-navigation__link--search-toggle" aria-label="Toggle search"></a>
        </li>
      </ul>
      <div class="p-navigation__search">
        <form class="p-search-box">
          <input type="search" class="p-search-box__input" name="q" placeholder="Search our sites" required="" aria-label="Search our sites">
          <button type="reset" class="p-search-box__reset"><i class="p-icon--close"></i></button>
          <button type="submit" class="p-search-box__button"><i class="p-icon--search"></i></button>
        </form>
      </div>
    </nav>
  </div>
  <div class="p-navigation__search-overlay"></div>
</header>

<div id="secondary-navigation" class="p-navigation is-sticky is-secondary is-dark">
  <div class="p-navigation__row--25-75">
    <div class="p-navigation__banner">
      <div class="p-navigation__tagged-logo">
        <a class="p-navigation__link" href="#">
          <div class="p-navigation__logo-tag">
            <img class="p-navigation__logo-icon" src="https://assets.ubuntu.com/v1/82818827-CoF_white.svg" alt="">
          </div>
          <span class="p-navigation__logo-title">Ubuntu&nbsp;Desktop</span>
        </a>
      </div>
      <ul class="p-navigation__items">
        <li class="p-navigation__item">
          <button class="js-secondary-menu-toggle-button p-navigation__link--menu-toggle" aria-controls="secondary-navigation" title="Toggle navigation" aria-label="Toggle navigation"></button>
        </li>
      </ul>
    </div>
    <nav class="p-navigation__nav" aria-label="Ubuntu Desktop">
      <ul class="p-navigation__items">
        <li class="p-navigation__item ">
          <a class="p-navigation__link" href="#">Organisations</a>
        </li>
        <li class="p-navigation__item ">
          <a class="p-navigation__link" href="#">Developers</a>
        </li>
        <li class="p-navigation__item ">
          <a class="p-navigation__link" href="#">Flavours</a>
        </li>
        <li class="p-navigation__item ">
          <a class="p-navigation__link" href="#">WSL</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<main id="main-content" class="inner-wrapper">
  <section class="p-section--hero">
    <div class="row--25-75">
      <div class="col">
        <h1>Ubuntu for desktops</h1>
      </div>
    </div>
  </section>
</main>
{% endblock %}

{% block script %}
  <script>
      {% include 'docs/examples/patterns/navigation/_script-sliding.js' %}
  </script>
{% endblock %}

{% block style %}
  <style>
    body { margin: 0; }
  </style>
{% endblock %}
